<script setup>
import { getCurrentInstance, ref } from "vue";
import { useRoute } from 'vue-router'
import { GetShopInfo } from "@/api/shopCate.js"
import dayjs from "dayjs";
const { proxy } = getCurrentInstance()
const show = ref(false);
const route = useRoute()
const list = ref([]);
const selectIndex = ref(16)

// 分页下拉配置
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);

const total = ref(0)
const params = ref({
	page: 1,
	pageSize: 10
})

if (route.query?.id) {
	selectIndex.value = route.query.id
}

const onLoad = async () => {
	try {
		const res = await GetShopInfo(params.value)
		if (res.data.records || res.data.records) {
			list.value.push(...res.data.records)
			total.value = res.data.total
		}
		if (list.value.length >= total.value) {
			finished.value = true;
		}
		refreshing.value = false
		params.value.page++
	} catch (e) {
		loading.value = false
		finished.value = true
	}
};

const onRefresh = () => {
	// 清空列表数据
	finished.value = false;
	// 重新加载数据
	list.value = []
	// 将 loading 设置为 true，表示处于加载状态
	loading.value = true;
	params.value.page = 1
	onLoad();
};

// 返回上级
const onClickLeft = () => {
	proxy.$router.back()
}

// 选择门店功能
const changeShop = (row) => {
	sessionStorage.setItem("shop-info", JSON.stringify(row))
	proxy.$router.back()
}


</script>

<template>
	<van-nav-bar title="门店列表" left-arrow @click-left="onClickLeft" />
	<van-search v-model="keywords" placeholder="请输入搜索关键词" />
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<van-list class="list overflow-auto" v-model:loading="loading" :finished="finished"
			:finished-text="list.length > 0 ? '没有更多了' : ''" @load="onLoad">
			<div class="content">
				<div :class="{ 'active': selectIndex == item.id }"
					class=" w-[100%] mt-[10px] p-[15px] bg-[#ffffff] rounded-[10px] flex text-[#a5a8ac] justify-between items-center"
					@click="changeShop(item)" v-for="item in list" :key="item.id">
					<div class="w-[65%]">
						<div class="text-[16px] font-bold text-[#464646]">{{ item.name }}({{ item.position }}店)</div>
						<div class="my-[8px]">{{ item.address }}</div>
						<div> <van-icon name="location-o" /> 营业时间：{{ dayjs(item.busineTime.split(",")[0]).format("HH:mm:ss") }} ~
							{{ dayjs(item.busineTime.split(",")[1]).format("HH:mm:ss") }}</div>
					</div>
					<div class="w-[1px] h-[100px] bg-[#eeeeee]"></div>
					<div>
						<div class="text-[#ea718f] text-[16px] font-bold">进店选购</div>
						<div class="my-[5px]">距离{{ item.distance }}km</div>
						<div>
							<van-icon name="phone-circle" color="#e93323" size="25" />
							<van-icon name="location" color="#e93323" size="25" class="ml-[10px]" />
						</div>
					</div>
				</div>
			</div>
		</van-list>
	</van-pull-refresh>
	<!-- 底部弹出 -->
	<van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" round closeable>
		<div class="p-[15px] text-[14px]">品牌选择</div>
	</van-popup>
</template>

<style scoped lang="scss">
.list {
	height: calc(100vh - 31px - 54px - 46px);
	background-color: #f4f4f4;
}

.content {
	padding: 10px;
}

.active {
	border: 1px solid #e93323;
}
</style>
